<template>
    <div class="main_box" style="padding:10px">
      <div class="add_wrap">
        <div class="tit">
          <h2>{{ dataForm.taskId ? '编辑任务' : '新增任务' }}</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
          <el-row>
            <el-form-item prop="taskType" label="任务类型">
              <el-select placeholder="请选择类型" v-model="dataForm.taskType" clearable filterable
                         @change="handleBusinessChange">
                <el-option v-for="item in $Options.taskTypeList" :key="item.id" :value="item.id" :label="item.name">

                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="compon" label="任务类型">
              <el-select placeholder="请选择类型" v-model="dataForm.taskType" clearable filterable
                         @change="handleBusinessChange">
                <el-option v-for="item in $Options.taskTypeList" :key="item.id" :value="item.id" :label="item.name">

                </el-option>
              </el-select>
            </el-form-item>
          </el-row>


          <el-row>
            <el-form-item>
              <el-button plain type="primary" @click="sureClick">保 存</el-button>
              <el-button plain @click="returnList">取 消</el-button>
            </el-form-item>
          </el-row>
        </el-form>

      </div>
    </div>
  </template>

  <script>
  import * as message from "@/constants/message";
  import MemberApi from '@/api/business/member';
  import BusinessApi from "@/api/business/business";
  import {getStorage} from '@/utils/auth';
  import {USER_INFO} from "@/constants/storeName";

  export default {
    data() {
      return {
        userInfo: "",
        dataForm: {
          taskId: "",
          memberCode: "",
          memberName: "",
          phone: "",
          taskType: "",
          allowMonthSettle:0,
          relationBusinessIds:[],
          balance:0,
          remark: "",

        },
        businessList: [], //管理员下的商户
        relationBusinessList:[],//可关联的商户

        showMonthSettle:false,//月结显示标志
        loadingIns: false,
        roleRules: {
          balance: [
            {required: true, message: "请输人余额", trigger: "blur"}
          ],
          taskType: [
            {required: true, message: "请选择商户", trigger: "change"}
          ],
          memberName: [
            {required: true, message: "请输人任务名称", trigger: "blur"}
          ],
          phone: [
            {required: true, message: "请输入手机号", trigger: "blur"},
            {pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: "手机号格式错误", trigger: "blur"}
          ],
        },
        // sysDepartList:[],
      }
    },
    components: {
    },
    watch: {

    },
    mounted() {
      this.init()
    },
    methods: {
      async init() {
        // 获取用户的信息
        this.userInfo = getStorage(USER_INFO)
        await this.getBusinessList()
        if (this.$route.query.id) {
          this.dataForm.taskId = this.$route.query.id
          this.getData()
        }
      },
      keydown(e) {
        if (e.keyCode == 32) {
          e.returnValue = false;
        }
      },
      getData() {
        MemberApi.getMemberInfo({
          id: this.dataForm.taskId
        }).then(res => {
          this.$Utils.bindingBean(this.dataForm, res.data)
          this.dataForm.relationBusinessIds = res.data.relationBusinessList.map(item=>item.id)
          console.log(this.dataForm.relationBusinessIds)
          this.handleBusinessChange(true)
        })
      },
      /**
       *@param init -是为true表示是初始化的调用这个时候里面的relationBusinessIds是不能清空的
       */
      async handleBusinessChange(init=false) {
        const {dataForm,businessList} = this
        if(!init)dataForm.relationBusinessIds = []
        dataForm.showMonthSettle = 0
        this.relationBusinessList = []
        if(dataForm.taskType){
          const target = businessList.find(item=>item.id==dataForm.taskType)
          this.showMonthSettle =target?(target.allowMonthSettle?true:false):false
          this.getRelationBusinessList()
        }
      },

      // 获取当前管理员下的商户
      async getBusinessList() {
        let {data} = await BusinessApi.listIdNameVo()
        this.businessList = data||[]
      },
      // 获取可关联的商户
      async getRelationBusinessList(){
        let {data} = await BusinessApi.listRelationBusiness({businessId:this.dataForm.taskType})
        this.relationBusinessList = data||[]
      },
      sureClick() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                let params = {
                    memberCode: this.dataForm.memberCode,
                    memberName: this.dataForm.memberName,
                    balance: this.dataForm.balance,
                    taskType: this.dataForm.taskType,
                    phone: this.dataForm.phone,
                    relationBusinessIds:this.dataForm.relationBusinessIds,
                    remark: this.dataForm.remark,
                };
               params.allowMonthSettle =this.showMonthSettle?this.dataForm.allowMonthSettle:0
                if (this.dataForm.taskId) {
                  params.taskId = this.dataForm.taskId
                  this.editData(params);
                } else {
                  this.addData(params);
                }
              });
          }
        })
      },
      addData(params) {
        MemberApi.addMember(params).then(() => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
      },
      editData(params) {
        MemberApi.editMember(params)
          .then(() => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.back();
      }
    },

  }
  </script>
  <style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
  <style lang="scss" scoped>
@import "@/assets/css/views/addType.scss";
</style>
